<template>
  <el-form ref="formRef" v-bind="$attrs" :size="size" :model="model" class="bs-form" :class="formType" :style="computedFormStyle" :label-width="labelWidth">
    <template v-if="options">
      <bs-form-item :model="model" v-bind="item" v-for="(item, index) in options" :key="index"></bs-form-item>
    </template>
    <slot/>
  </el-form>
</template>
<script setup lang="ts">
import {ref, computed, onMounted} from 'vue'
import BsFormItem from './BsFormItem.vue'
import type {FormInstance} from 'element-plus'
type BsFormProps = {
  size?: '' | 'large' | 'default' | 'small'
  labelWidth?: number | string,
  model: Record<string, any>
  options?: BsFormItemProps[]
  formType?: '' | 'query'
  grid?: number
}

const props = withDefaults(defineProps<BsFormProps>(), {
  labelWidth: 80,
  size: 'large'
})
const formRef = ref<FormInstance>()

const expose:any = {}

const computedFormStyle = computed(() => {
  if (props.grid) {
    return {
      'grid-template-columns': `repeat(${props.grid}, 1fr)`,
      'column-gap': '16px'
    }
  }
  return {}
})

onMounted(() => {
  if (formRef.value) {
    const methods = ['validate', 'validateField', 'resetFields', 'scrollToField', 'clearValidate', 'clearValidate']
    methods.forEach(key => {
      expose[key] = (formRef.value as any)[key]
    })
  }
})
defineExpose(expose)
</script>
<style lang="scss" scoped>
.bs-form {
  display: grid;
  &.query {
    grid-template-columns: repeat(4, 1fr);
    :deep(.form-item-btns) {
      grid-column-start: 4;
      grid-column-end: 5;
      justify-self: end;
      text-align: center;
    }
  }
  // @media screen and (min-width: 1920px) {
  //   &.query {
  //     grid-template-columns: repeat(4, 1fr);
  //     :deep(.form-item-btns) {
  //       grid-column-start: 4;
  //       grid-column-end: 5;
  //       justify-self: end;
  //       text-align: center;
  //     }
  //   }
  // }
  :deep(.el-date-editor.el-input) {
    width: 100%;
  }
  :deep(.el-form-item__content) {
    align-items: start;
  }
}
</style>
